@charset "utf-8";
/* jihyeok, gunil */

/* Common */
html,body{height:100%}
body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textare,a,button,select{margin:0;padding:0;-webkit-text-size-adjust:none;}
body,input,textarea,select,button,table{font-family:'Open Sans','나눔고딕',NanumGothic,ng,'돋움',dotum,AppleGothic,sans-serif;font-size:12px}
body{word-wrap:break-word}
img,fieldset{border:0}
img{vertical-align:top}
ul,ol{list-style:none}
em,address{font-style:normal}
a{text-decoration:none;color:#313FA0;}
a:hover,a:active,a:focus{text-decoration:underline}
.blind,legend{visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;width:0;height:0;font-size:0;line-height:0}
code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}

article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}

/* webfont */
@font-face{font-family:ng;src:url(../fonts/nanumgothic.eot);src:local('※'),url(../fonts/nanumgothic.woff) format('woff')}

input[type="checkbox"],
input[type="radio"] {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
}

/* layout */
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* layout */
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.row {
  margin-right: -15px;
  margin-left: -15px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}
.col-xs-12 {
  width: 100%;
}
.col-xs-11 {
  width: 91.66666667%;
}
.col-xs-10 {
  width: 83.33333333%;
}
.col-xs-9 {
  width: 75%;
}
.col-xs-8 {
  width: 66.66666667%;
}
.col-xs-7 {
  width: 58.33333333%;
}
.col-xs-6 {
  width: 50%;
}
.col-xs-5 {
  width: 41.66666667%;
}
.col-xs-4 {
  width: 33.33333333%;
}
.col-xs-3 {
  width: 25%;
}
.col-xs-2 {
  width: 16.66666667%;
}
.col-xs-1 {
  width: 8.33333333%;
}
.col-xs-pull-12 {
  right: 100%;
}
.col-xs-pull-11 {
  right: 91.66666667%;
}
.col-xs-pull-10 {
  right: 83.33333333%;
}
.col-xs-pull-9 {
  right: 75%;
}
.col-xs-pull-8 {
  right: 66.66666667%;
}
.col-xs-pull-7 {
  right: 58.33333333%;
}
.col-xs-pull-6 {
  right: 50%;
}
.col-xs-pull-5 {
  right: 41.66666667%;
}
.col-xs-pull-4 {
  right: 33.33333333%;
}
.col-xs-pull-3 {
  right: 25%;
}
.col-xs-pull-2 {
  right: 16.66666667%;
}
.col-xs-pull-1 {
  right: 8.33333333%;
}
.col-xs-pull-0 {
  right: auto;
}
.col-xs-push-12 {
  left: 100%;
}
.col-xs-push-11 {
  left: 91.66666667%;
}
.col-xs-push-10 {
  left: 83.33333333%;
}
.col-xs-push-9 {
  left: 75%;
}
.col-xs-push-8 {
  left: 66.66666667%;
}
.col-xs-push-7 {
  left: 58.33333333%;
}
.col-xs-push-6 {
  left: 50%;
}
.col-xs-push-5 {
  left: 41.66666667%;
}
.col-xs-push-4 {
  left: 33.33333333%;
}
.col-xs-push-3 {
  left: 25%;
}
.col-xs-push-2 {
  left: 16.66666667%;
}
.col-xs-push-1 {
  left: 8.33333333%;
}
.col-xs-push-0 {
  left: auto;
}
.col-xs-offset-12 {
  margin-left: 100%;
}
.col-xs-offset-11 {
  margin-left: 91.66666667%;
}
.col-xs-offset-10 {
  margin-left: 83.33333333%;
}
.col-xs-offset-9 {
  margin-left: 75%;
}
.col-xs-offset-8 {
  margin-left: 66.66666667%;
}
.col-xs-offset-7 {
  margin-left: 58.33333333%;
}
.col-xs-offset-6 {
  margin-left: 50%;
}
.col-xs-offset-5 {
  margin-left: 41.66666667%;
}
.col-xs-offset-4 {
  margin-left: 33.33333333%;
}
.col-xs-offset-3 {
  margin-left: 25%;
}
.col-xs-offset-2 {
  margin-left: 16.66666667%;
}
.col-xs-offset-1 {
  margin-left: 8.33333333%;
}
.col-xs-offset-0 {
  margin-left: 0;
}
@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666667%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  .col-sm-1 {
    width: 8.33333333%;
  }
  .col-sm-pull-12 {
    right: 100%;
  }
  .col-sm-pull-11 {
    right: 91.66666667%;
  }
  .col-sm-pull-10 {
    right: 83.33333333%;
  }
  .col-sm-pull-9 {
    right: 75%;
  }
  .col-sm-pull-8 {
    right: 66.66666667%;
  }
  .col-sm-pull-7 {
    right: 58.33333333%;
  }
  .col-sm-pull-6 {
    right: 50%;
  }
  .col-sm-pull-5 {
    right: 41.66666667%;
  }
  .col-sm-pull-4 {
    right: 33.33333333%;
  }
  .col-sm-pull-3 {
    right: 25%;
  }
  .col-sm-pull-2 {
    right: 16.66666667%;
  }
  .col-sm-pull-1 {
    right: 8.33333333%;
  }
  .col-sm-pull-0 {
    right: auto;
  }
  .col-sm-push-12 {
    left: 100%;
  }
  .col-sm-push-11 {
    left: 91.66666667%;
  }
  .col-sm-push-10 {
    left: 83.33333333%;
  }
  .col-sm-push-9 {
    left: 75%;
  }
  .col-sm-push-8 {
    left: 66.66666667%;
  }
  .col-sm-push-7 {
    left: 58.33333333%;
  }
  .col-sm-push-6 {
    left: 50%;
  }
  .col-sm-push-5 {
    left: 41.66666667%;
  }
  .col-sm-push-4 {
    left: 33.33333333%;
  }
  .col-sm-push-3 {
    left: 25%;
  }
  .col-sm-push-2 {
    left: 16.66666667%;
  }
  .col-sm-push-1 {
    left: 8.33333333%;
  }
  .col-sm-push-0 {
    left: auto;
  }
  .col-sm-offset-12 {
    margin-left: 100%;
  }
  .col-sm-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-sm-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-sm-offset-9 {
    margin-left: 75%;
  }
  .col-sm-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-sm-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-sm-offset-6 {
    margin-left: 50%;
  }
  .col-sm-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-sm-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-sm-offset-3 {
    margin-left: 25%;
  }
  .col-sm-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-sm-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-sm-offset-0 {
    margin-left: 0;
  }
}
@media (min-width: 992px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }
  .col-md-pull-12 {
    right: 100%;
  }
  .col-md-pull-11 {
    right: 91.66666667%;
  }
  .col-md-pull-10 {
    right: 83.33333333%;
  }
  .col-md-pull-9 {
    right: 75%;
  }
  .col-md-pull-8 {
    right: 66.66666667%;
  }
  .col-md-pull-7 {
    right: 58.33333333%;
  }
  .col-md-pull-6 {
    right: 50%;
  }
  .col-md-pull-5 {
    right: 41.66666667%;
  }
  .col-md-pull-4 {
    right: 33.33333333%;
  }
  .col-md-pull-3 {
    right: 25%;
  }
  .col-md-pull-2 {
    right: 16.66666667%;
  }
  .col-md-pull-1 {
    right: 8.33333333%;
  }
  .col-md-pull-0 {
    right: auto;
  }
  .col-md-push-12 {
    left: 100%;
  }
  .col-md-push-11 {
    left: 91.66666667%;
  }
  .col-md-push-10 {
    left: 83.33333333%;
  }
  .col-md-push-9 {
    left: 75%;
  }
  .col-md-push-8 {
    left: 66.66666667%;
  }
  .col-md-push-7 {
    left: 58.33333333%;
  }
  .col-md-push-6 {
    left: 50%;
  }
  .col-md-push-5 {
    left: 41.66666667%;
  }
  .col-md-push-4 {
    left: 33.33333333%;
  }
  .col-md-push-3 {
    left: 25%;
  }
  .col-md-push-2 {
    left: 16.66666667%;
  }
  .col-md-push-1 {
    left: 8.33333333%;
  }
  .col-md-push-0 {
    left: auto;
  }
  .col-md-offset-12 {
    margin-left: 100%;
  }
  .col-md-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-md-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-md-offset-9 {
    margin-left: 75%;
  }
  .col-md-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-md-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-md-offset-6 {
    margin-left: 50%;
  }
  .col-md-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-md-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-md-offset-3 {
    margin-left: 25%;
  }
  .col-md-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-md-offset-0 {
    margin-left: 0;
  }
}
@media (min-width: 1200px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
  }
  .col-lg-12 {
    width: 100%;
  }
  .col-lg-11 {
    width: 91.66666667%;
  }
  .col-lg-10 {
    width: 83.33333333%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-8 {
    width: 66.66666667%;
  }
  .col-lg-7 {
    width: 58.33333333%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-5 {
    width: 41.66666667%;
  }
  .col-lg-4 {
    width: 33.33333333%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-2 {
    width: 16.66666667%;
  }
  .col-lg-1 {
    width: 8.33333333%;
  }
  .col-lg-pull-12 {
    right: 100%;
  }
  .col-lg-pull-11 {
    right: 91.66666667%;
  }
  .col-lg-pull-10 {
    right: 83.33333333%;
  }
  .col-lg-pull-9 {
    right: 75%;
  }
  .col-lg-pull-8 {
    right: 66.66666667%;
  }
  .col-lg-pull-7 {
    right: 58.33333333%;
  }
  .col-lg-pull-6 {
    right: 50%;
  }
  .col-lg-pull-5 {
    right: 41.66666667%;
  }
  .col-lg-pull-4 {
    right: 33.33333333%;
  }
  .col-lg-pull-3 {
    right: 25%;
  }
  .col-lg-pull-2 {
    right: 16.66666667%;
  }
  .col-lg-pull-1 {
    right: 8.33333333%;
  }
  .col-lg-pull-0 {
    right: auto;
  }
  .col-lg-push-12 {
    left: 100%;
  }
  .col-lg-push-11 {
    left: 91.66666667%;
  }
  .col-lg-push-10 {
    left: 83.33333333%;
  }
  .col-lg-push-9 {
    left: 75%;
  }
  .col-lg-push-8 {
    left: 66.66666667%;
  }
  .col-lg-push-7 {
    left: 58.33333333%;
  }
  .col-lg-push-6 {
    left: 50%;
  }
  .col-lg-push-5 {
    left: 41.66666667%;
  }
  .col-lg-push-4 {
    left: 33.33333333%;
  }
  .col-lg-push-3 {
    left: 25%;
  }
  .col-lg-push-2 {
    left: 16.66666667%;
  }
  .col-lg-push-1 {
    left: 8.33333333%;
  }
  .col-lg-push-0 {
    left: auto;
  }
  .col-lg-offset-12 {
    margin-left: 100%;
  }
  .col-lg-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-lg-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-lg-offset-9 {
    margin-left: 75%;
  }
  .col-lg-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-lg-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-lg-offset-6 {
    margin-left: 50%;
  }
  .col-lg-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-lg-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-lg-offset-3 {
    margin-left: 25%;
  }
  .col-lg-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-lg-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-lg-offset-0 {
    margin-left: 0;
  }
}

.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
.navbar-header:after,
.navbar-collapse:before,
.navbar-collapse:after{
  display: table;
  content: " ";
}
.container:after,
.container-fluid:after,
.row:after,
.navbar:after,
.navbar-header:after,
.navbar-toggle:after,
.navbar-collapse:after{
  clear: both;
}

.container > .navbar-header,
.container-fluid > .navbar-header,
.container .navbar-nav,
.container-fluid .navbar-nav {
  margin-right: -15px;
  margin-left: -15px;
}
@media (min-width: 768px) {
  .container > .navbar-header,
  .container-fluid > .navbar-header,
  .container > .navbar-collapse,
  .container-fluid > .navbar-collapse {
    margin-right: 0;
    margin-left: 0;
  }
}

/* custom */
/* mobile header */
.skip > a{overflow:hidden;display:block;height:0;line-height:28px;background-color:#fff;text-align:center}
.skip > a:focus{height:auto}

.navbar{position:relative;width:100%;min-height:60px;border-bottom:1px solid #e18181;background-color:#ff8989}
.navbar .container{}
.navbar-static-top{z-index:1000;border-width:0 0 1px}

.navbar-toggle{float:left;margin:14px 0 9px 5px;padding:9px 10px;border:0;background-color:transparent;cursor:pointer}
.navbar-toggle .icon-bar{background-color:#fff;display:block;width:22px;height:2px;border-radius:1px}
.navbar-toggle .icon-bar+.icon-bar{margin-top:4px}
.navbar-brand-wrap{text-align:center}
.navbar-brand{display:inline-block;margin-left:-28px;font-size:26px;line-height:54px;color:#fff}
.navbar-brand:hover{text-decoration:none}
.navbar-brand > span{vertical-align:middle}
.navbar-nav{display:none}
.navbar-nav.open{display:block}
.nav{background-color:#fff}
.nav li a{display:block;color:#ff8989;text-decoration:none}
.nav > li > a,.nav .nav-depth > li > a{position:relative;padding:20px 15px;font-weight:600}
.nav > li.on{background-color:#f9f9f9}
.nav > li > a{font-size:14px}
.nav > li > a > i{float:right;font-size:19px;margin-top:1px}
.nav .nav-depth > li > a{font-size:13px;background-color:#f9f9f9;color:#7f7f7f}
.nav .nav-depth > li.on > a{color:#373737}
.spot-area{overflow:hidden;position:relative;background-color:#ff8989;text-align:center}
.spot-box{margin:0 -10px}
.spot-img{width:100%;margin-left:-15px;margin-right:-15px}
.spot-img.m-spot{position:absolute;left:50%;width:570px;height:331px;margin-left:-285px}
.spot-box-txt{padding-bottom:75px}
.spot-box-txt .container-txt{font-family:'나눔고딕',NanumGothic,ng;font-size:14px;line-height:24px;color:#fff;text-align:center}
.spot-box-txt .btn-box{display:none}

/* contents */
/* main */
.contents{background-color:#fff}
.contents .container-tit{margin-top:100px;font-size:29px;font-weight:700;text-align:center;letter-spacing:7px}
.contents .container-txt{font-family:'나눔고딕',NanumGothic,ng;text-align:center}
.half-rule{width:26px;margin:17px auto 127px;border:0;border-top:2px solid #ff8989}

.feature-container{padding-bottom:34px}
.feature-container .half-rule{margin-bottom:100px}
.feature-container .row > div{margin-bottom:86px}
.feature-container dl{margin-left:45px}
.feature-container dt{margin-left:-45px;margin-bottom:17px;font-size:19px;color:#373737}
.feature-container dt > i{margin-right:17px;font-size:28px;color:#ff8989;vertical-align:middle}
.feature-container dt > span{font-weight:600}
.feature-container dd{font-family:'나눔고딕',NanumGothic,ng;font-size:14px;line-height:26px;color:#444}

.type-container{padding-bottom:110px;background-color:#f6f6f6}
.type-container .box-area{margin-bottom:40px;border:1px solid #ededed;background-color:#fff}
.type-container .box-area.off{height:359px;background-color:#ff8989;text-align:center}
.type-container .half-rule{margin-bottom:100px}
.type-container .box-contents{width:100%;margin:0 auto;padding:45px 20px 50px}
.type-container .box-contents-tit{padding-bottom:24px;border-bottom:1px solid #f4f4f4;font-size:21px;font-weight:700;text-align:center;letter-spacing:3px}
.type-container .box-contents-txt{padding:31px 0 42px;font-family:'나눔고딕',NanumGothic,ng;font-size:14px;line-height:30px;text-align:left}
.type-container .btn-lib{display:table;width:100%;height:46px;border:2px solid #373737;font-size:16px;font-weight:700;color:#373737;text-decoration:none;-webkit-transition: all 0.3s ease;transition: all 0.3s ease}
.type-container .btn-lib .btn-lib-txt{display:table-cell;width:100%;height:100%;vertical-align:middle;text-align:center}
.type-container .btn-lib i{display:inline-block;width:47px;margin-left:-44px;opacity:0;color:#fff}
.type-container .btn-lib:hover,.type-container .btn-lib:focus{border-color:#ff8989;background-color:#ff8989;color:#fff}
.type-container .btn-lib:hover i,.type-container .btn-lib:focus i{width:47px;margin-left:-22px;opacity:1}

.contribution-container{padding-bottom:120px;background-color:#3f3f3f}
.contribution-container .container-tit{color:#fff}
.contribution-container .container-txt{padding-bottom:52px;font-size:16px;line-height:30px;color:#fff}
.contribution-container .half-rule{margin-bottom:41px}

.btn-github{display:table;height:46px;margin:0 auto;padding:0 30px;border:2px solid #fff;font-size:16px;font-weight:600;color:#fff;letter-spacing:2px;text-decoration:none;-webkit-transition: all 0.3s ease;transition: all 0.3s ease}
.btn-github .btn-github-txt{display:table-cell;width:100%;height:100%;vertical-align:middle;text-align:center}
.btn-github:hover{border-color:#ff8989;background-color:#ff8989;text-decoration:none}

/* sub */
.sub-header{overflow:hidden;height:auto;padding-bottom:70px;background-color:#ff8989}
.sub-header .container{position:relative}
.sub-header .sub-header-tit{margin:70px 0 32px;font-size:27px;font-weight:600;color:#fff;text-align:left;letter-spacing:3px}
.sub-header .half-rule{width:30px;margin:29px auto 33px 0}
.sub-header .sub-header-txt{position:relative;font-size:15px;line-height:30px;color:#fff;text-align:left;z-index:100}
.sub-spot-img{display:none}

.sub-section-tit{font-size:25px;font-weight:600;text-align:center;color:#373737;letter-spacing:7px}
.sub-section .half-rule{margin:19px auto 60px}

.sub-category-wrap{display:none}
.sub-selectbox-wrap{display:block;margin:20px 0 20px}

.select-box{position:relative;width:100%;height:60px;background-color:#ff8989}
.select-box label{position:absolute;top:14px;left:20px;font-size:22px;color:#fff;letter-spacing:7px}
.select-box i{position:absolute;top:19px;right:20px;font-size:22px;color:#fff}
.select-category{width:100%;height:60px;min-height:60px;line-height:60px;opacity:0;filter:alpha(opacity=0)}

.sub-search-wrap{padding-bottom:120px}
.sub-search{position:relative;width:100%;}
.sub-search-input{width:100%;height:56px;padding:11px 20px 13px 68px;border:2px solid #373737;font-size:22px;letter-spacing:3px;color:#373737}
.sub-search-icon{position:absolute;top:11px;left:20px;font-size:28px}

.sub-icon-wrap{padding-bottom:45px;background-color:#f9f9f9}
.sub-icon-wrap:after{content:'';display:block;clear:both}
.sub-icon-wrap .sub-header-tit{letter-spacing:5px}
.sub-icon-wrap .sub-section-tit{clear:both;padding-top:93px;letter-spacing:2px}

.filter{display:none; padding-top:92px;background-color:#f9f9f9}
.filter .sub-header-tit{letter-spacing:5px}
.search-txt{letter-spacing:2px}
.no-search-result {display: none;padding-bottom:100px;}
.no-search-result .no-search-notice{margin-bottom:42px;font-size:18px;font-family:'나눔고딕',NanumGothic,ng;line-height:34px;text-align:center;color:#373737}
.no-search-result .no-search-notice .search-txt{font-family:'Open Sans','나눔고딕',NanumGothic,ng,'돋움',dotum,AppleGothic,sans-serif;font-weight:700}
.no-search-result .btn-github{border-color:#373737;color:#373737}
.no-search-result .btn-github:hover{border-color:#ff8989;background-color:#ff8989;color:#fff}

/* xe icon */
.glyph{overflow:hidden;float:left;width:50%;height:90px;margin-bottom:30px;padding-bottom:0;font-size:16px;text-align:center}
.glyph {
  padding: 10px;
}
.unicode {font-family: xeicon; font-size: 32px; display: block; height: 48px; line-height: 48px;}
.glyph:focus .unicode {font-size: 48px;}
.fs1{font-size:32px;color:#000}
.mls{display:block;font-size:13px;margin-top:4px;color:#000}
.clearfix:before,.clearfix:after{display:table;content:''}
.hidden-true{display:none}

.sub-example{padding-bottom:96px}
.sub-example:first-child{padding-top:76px}
.sub-example .sub-page-header{font-family:'나눔고딕',NanumGothic,ng;font-size:21px;font-weight:500;color:#373737}
.sub-example .half-rule{margin:24px auto 24px 0}
.sub-example .sub-page-preview{font-family:'Open Sans','나눔고딕',NanumGothic,ng;font-size:14px; color:#373737}
.sub-example .sub-page-preview2{font-family:'Open Sans','나눔고딕',NanumGothic,ng;font-size:14px; color:#373737}
.sub-example .sub-page-preview2 li{margin-bottom:0.8em}
.sub-page-preview .preview-box.box-left i{font-size: 20px}
.sub-example .sub-page-preview-txt{line-height:25px}
.sub-example .sub-page-preview-txts{font-size: 13px; line-height:1.8em}
.sub-example .preview-box{display:inline-block;vertical-align:middle}
.sub-example .preview-box.box-left{width:30px}
.sub-example .preview-box.box-left2{width:40px}
.sub-example .preview-box.box-right{font-size:14px;}
.sub-example .sub-page-txt-wrap{overflow:hidden;padding-top:33px}
.sub-example .sub-page-txt{float:left;padding-bottom:17px;font-family:'나눔고딕',NanumGothic,ng;font-size:15px;font-weight:500;line-height:21px;color:#373737}
.sub-example .sub-btn-wrap{display:none;float:right}
.sub-example .sub-btn-wrap a{}
.sub-example .sub-icon-size li{margin-bottom:8px}

.sub-example .lst_group{border:1px solid #ccc;border-radius:3px}
.sub-example .lst_group li{padding:10px 0px 10px 12px;border-bottom:1px solid #ccc;font-family:'Open Sans','나눔고딕',NanumGothic,ng;font-size:14px}
.sub-example .lst_group li i{font-size: 18px}
.sub-example .lst_group li:last-child{border-bottom:none}
.sub-example .lst_group li i{vertical-align:middle}


.sub-example .lst_row{overflow:hidden}
.sub-example .lst_row li{float:left;width:50px;height:45px;margin-right:3px;font-size:26px;line-height:38px;text-align:center}
.sub-example .lst_row li i{vertical-align:middle}
.sub-example .lst_rotate i{margin-right:7px;font-size:25px;vertical-align: middle}
.sub-example .lst_rotate li{margin-bottom:10px}

.code-box{padding:14px 20px 13px 20px;font-size:14px;font-weight:600;line-height:26px;background-color:#f3f3f3;color:#373737;word-spacing:2px}
.code-box code{font-family:'Open Sans'}
.code-box .code-tag{color:#373737} 
.code-box .code-class{color:#ff8989}
.code-box .code-class-name{color:#a81b1b}
.code-box i{color:#333}
.code-box .code-txt{word-spacing:0;font-size:14px}

.sub-started{margin-bottom:90px;font-family:'나눔고딕',NanumGothic,ng;font-size:15px;font-weight:600}
.sub-started .sub-section-tit{text-align:left;letter-spacing:0}
.sub-started .half-rule{margin:24px auto 20px 0}
.sub-started .sub-section-sub-tit{margin:50px 0 20px;padding-bottom:20px;font-size:20px;font-weight:500;border-bottom:1px solid #e2e2e2;color:#a81b1b}
.sub-started .sub-section-info{margin-bottom:30px}
.sub-started .desc-box{margin-bottom:63px;padding-left:15px;line-height:22px}
.sub-started .desc-box:first-child{}
.sub-started .desc-box > li{margin-top:35px}
.sub-started .desc-box > li:first-child{margin-top:0}
.sub-started .desc-box .desc-txt{margin-bottom:8px}
.sub-started .desc-box .deco-box{display:inline-block;padding:2px;border:1px solid #dedede;background-color:#fafafa}
.sub-started .desc-code-box{padding-left:20px}
.sub-started #installation{padding-top:97px}
.sub-started #bower{margin-top:-72px;padding-top:80px}

.desc-code{margin-bottom:15px;padding:0 5px;border:1px solid #f3c9c9;line-height:28px;background-color:#fff7f7}
.desc-code code{font-family:'나눔고딕',NanumGothic,ng;font-weight:400;color:#333}
.sub-started .notice-txt-area{margin-top:-30px}
.sub-started .notice-txt-area > p{color:#888;line-height:25px}

.sub-license{margin-top:79px;font-family:'나눔고딕',NanumGothic,ng;color:#333}
.sub-license:first-child{margin-top:87px}
.sub-license .sub-section-tit{font-size:23px;font-weight:500;text-align:left;letter-spacing:0}
.sub-license .half-rule{margin:24px auto 32px 0}
.sub-license .info_txt_lst{margin-top:10px;list-style-type:disc;font-size:15px;line-height:28px;padding-left: 24px}
.sub-license .info_txt_lst:first-child{margin-top:0}
.sub-license .info_txt_lst .info_txt a{color:#455ede}
.sub-license .info_txt_lst .info_txt a:hover{text-decoration:underline}
.sub-license .info_txt_lst .info_txt .box_txt{display:inline-block;min-height:16px;padding:3px 4px 3px 4px;border:solid 1px #f3f3f3;border-radius: 3px; background-color: #f3f3f3; line-height:16px;vertical-align:middle;}
.sub-license .notice-txt-area{padding:38px 0 90px;font-size:15px;line-height:28px}
.sub-license.last{padding-bottom:90px}

.btn_top{display:none;overflow:hidden;position:fixed;right:0px;bottom:0px;z-index:1000;width:48px;height:48px;background-color:#333;font-size:24px;line-height:48px;color:#fff;text-align:center;opacity:0.6;filter:alpha(opacity=80)}
.btn_top:hover{background-color:#ff8989;color:#fff;text-decoration:none;opacity:1;filter:alpha(opacity=100)}

.footer{padding-bottom:20px}
.footer .sns-area{float:left;padding-top:11px}
.footer .sns-area li{float:left;margin-left:24px}
.footer .sns-area li:first-child{margin-left:0}
.footer .sns-area li > a{font-size:26px;color:#373737;vertical-align:top;text-decoration:none}
.footer-area{float:left;width:100%;padding-top:18px}
.footer-area .btn-footer-logo{display:inline-block;padding:10px 0 10px;font-weight:700;color:#373737;letter-spacing:3px;text-decoration:none}
.footer-area .address-txt{font-family:'나눔고딕',NanumGothic,ng;font-size:12px;line-height:22px;color:#373737}
.footer-area .address-txt a{color:#373737}

.transition{-webkit-transition: all 0.3s ease;transition: all 0.3s ease}

@media (min-width: 768px) {    
/* tablet */
.navbar-fixed-top{position:fixed;z-index:1100}
.navbar{min-height:80px;border-color:#eee;border:0}
.navbar:before{position:absolute;bottom:0;width:100%;height:1px;background-color:#fff;filter:alpha(opacity=50);opacity:0.5}
.navbar-header{float:left}
.navbar-toggle{display:none}
.navbar-brand{margin-left:0;line-height:73px;letter-spacing:2px}
.navbar-nav{display:block !important;height:auto}
.nav{float:right;background-color:transparent;background-image:url(../img/bg_blank.png);background-repeat:repeat}
.nav li a{color:#fff}
.nav > li{float:left;position:relative;z-index:10}
.nav > li > a{position:relative;display:block;padding-top:0;padding-bottom:0;font-size:15px;font-weight:600;line-height:79px;color:#ffd9d9;-webkit-transition: all 0.3s ease;transition: all 0.3s ease}
.nav > li > a > i{display:none}
.nav > li.on{background-color:transparent}    
.nav > li.on > a,.nav > li > a:hover,.nav > li > a:focus{color:#fff}
.nav .nav-depth{position:absolute;top:100%;overflow:hidden;min-width:150px}
.nav .nav-depth.off{height:0}
.nav .nav-depth > li{border-top:1px solid transparent}
.nav .nav-depth > li:first-child{border-top:0}
.nav .nav-depth > li > a{padding-top:10px;padding-bottom:10px;padding-right:15px;background-color:#fff;color:#373737;-webkit-transition: all 0.3s ease;transition: all 0.3s ease}
.nav .nav-depth > li.on > a,.nav .nav-depth > li > a:hover,.nav .nav-depth > li > a:focus{background-color:#f9f9f9}
        
.sub-type .navbar{background-color:#fff}    
.sub-type .navbar .navbar-brand{color:#373737}
.sub-type .navbar .nav > li > a{color:#a3a3a3}
.sub-type .navbar .nav > li.on > a,.sub-type .navbar .nav > li > a:hover,.sub-type .navbar .nav > li > a:focus{color:#373737}
.sub-type .navbar .nav .nav-depth > li > a{background-color:#373737;color:#999}
.sub-type .navbar .nav .nav-depth > li.on > a,.sub-type .navbar .nav .nav-depth > li > a:hover,.sub-type .navbar .nav .nav-depth > li > a:focus{color:#fff}

.move-navbar{min-height:60px;background-color:#fff}
.move-navbar:before{display:none}
.move-navbar:after{content:"";position:absolute;bottom:-5px;left:0;width:100%;height:5px;background:url(../img/bg_bd_shadow.png) 0 100% repeat-x}
.move-navbar .navbar-brand-wrap{}
.move-navbar .navbar-brand{line-height:54px;color:#373737}
.move-navbar .nav > li > a{padding-top:0;padding-bottom:0;line-height:60px;color:#a3a3a3}
.move-navbar .nav > li.on > a,.move-navbar .nav > li > a:hover,.move-navbar .nav > li > a:focus{color:#373737}
.move-navbar .nav .nav-depth > li > a{background-color:#373737;color:#727272}
.move-navbar .nav .nav-depth > li.on > a,.move-navbar .nav .nav-depth > li > a:hover,.move-navbar .nav .nav-depth > li > a:focus{color:#fff} 

.spot-box-txt{padding-bottom:80px}
.spot-box-txt .container-txt{margin-bottom:40px;font-size:14px;line-height:28px}
.spot-box-txt .btn-box{display:table;margin:0 auto}
.spot-box-txt .btn-box .btn-box-wrap{display:inline-block;margin:0 27px;vertical-align:top}
.spot-box-txt .btn-box .btn-dnld{display:table-cell;width:286px;height:60px;border:2px solid #fff;font-size:16px;font-weight:600;color:#fff;text-align:center;vertical-align:middle;text-decoration:none}
.spot-box-txt .btn-box .btn-dnld > i{display:none}
.spot-box-txt .btn-box .btn-dnld:hover,.spot-area .btn-box .btn-dnld:focus{font-size:32px;background-color:#fff;color:#ff8989;-webkit-transition: all 0.3s ease;transition: all 0.3s ease}
.spot-box-txt .btn-box .btn-dnld:hover > i,.spot-area .btn-box .btn-dnld:focus > i{display:inline}
.spot-box-txt .btn-box .btn-dnld:hover > span,.spot-area .btn-box .btn-dnld:focus > span{display:none}

.spot-box-txt .btn-box .btn-dnld-off{display:table-cell;width:286px;height:60px;border:2px solid #db5656;font-size:16px;font-weight:700;color:#a81b1b;text-align:center;vertical-align:middle;text-decoration:none;background-color:#db5656}

.feature-container .row > div{margin-bottom:76px}
.type-container .box-contents{width:76%;padding:45px 0 50px}
.type-container .box-area.off{height:389px}
    
/* sub */
.sub-header{padding-top:0;height:270px;background-color:#ff8989}
.fixed-sub-header{padding-top:80px;height:350px}
.sub-header .sub-header-txt{width:500px}
.sub-spot-img{display:block;position:absolute;top:0;left:auto;right:15px;padding:0;z-index:10}

.sub-category-wrap{display:block;padding:77px 0 104px}
.sub-category-wrap .sub-section-tit{letter-spacing:5px}
.sub-selectbox-wrap{display:none}
.sub-category{overflow:hidden}
.sub-category li{float:left;width:25%;height:42px;margin-bottom:14px}
.sub-category li a{font-size:15px;font-weight:500;line-height:23px;color:#8f8f8f}
.sub-category li a:hover,.sub-category li a:active,.sub-category li a:focus{color:#373737;text-decoration:none}

.sub-search{position:relative;width:620px;margin:0 auto}    

/* xe icon */
.glyph{width:25%}

/* example */
.sub-example .sub-page-txt-wrap{padding-top:0}
.sub-example .sub-page-txt{width:68%}
.sub-example .sub-btn-wrap{display:block;float:right}
.sub-example .sub-btn-wrap a{margin-left:16px;line-height:22px;color:#989898}
.sub-example .sub-btn-wrap a:first-child{margin-left:0}
    
.footer .sns-area{float:right;padding-top:40px}
.footer-area{float:left;width:auto;padding-top:18px}    

}
@media (min-width: 992px) {
/* small pc */
.spot-area .container-txt{font-size:18px;line-height:36px}
.spot-area .container-txt{margin-bottom:60px}
.spot-area .btn-box a{width:280px;height:60px}

.sub-header .sub-header-txt{width:auto}

.type-container .box-area.off{height:359px}
    
/* sub */
.sub-category li{height:auto}
/* xe icon */
.glyph{width:16.6%}

/* example */
.sub-example .sub-page-txt{width:80%}
    
.sub-type .footer{border-top:1px solid #e2e2e2}
    
}
@media (min-width: 1200px) {
/* desktop pc */
.spot-box-img{height:680px}
.spot-img{width:1170px;height:680px}
}
